<template>
	<view class="my-main">
		<view class="my-user-info-box flexR">
			<image class="user-info-head-img" src="../../static/my/my_head.png"></image>
			<view class="user-info-head-name">小星星</view>
			<image class="enter-icon" src="../../static/my/jiantou2.png"></image>
		</view>
		<view class="my-use-box">
			<view class="my-menus-box my-box">
				<view class="my-menus-list flexR" v-for="menu in menus" @click="menusBut(menu)">
					<image class="my-menus-icon" :src="menu.icon"></image>
					<view class="my-menus-name">{{menu.name}}</view>
					<image class="enter-icon" src="../../static/my/jiantou2.png"></image>
				</view>
			</view>
		</view>
	</view>
	<tarBar :navIndex='2'></tarBar>
</template>

<script setup>
	import { ref,reactive } from 'vue';
	import { onShow,onLoad } from '@dcloudio/uni-app';
	import tarBar from '../../componenbts/tarBar.vue'
	const menus = ref([
		{
			id:1,
			name:'我的订单',
			icon:'../../static/my/my_04.png',
			url:''
		},
		{
			id:2,
			name:'我的收藏',
			icon:'../../static/my/my_01.png',
			url:''
		},
		{
			id:3,
			name:'我的收货地址',
			icon:'../../static/my/my_02.png',
			url:''
		},
		{
			id:4,
			name:'联系我们',
			icon:'../../static/my/my_03.png',
			url:''
		}
	])
	const menusBut = (val) => {
		if(val.url){
			uni.navigateTo({
				url:val.url
			})
		}else{
			uni.showToast({
				title: '功能正在开发中',
				icon:'none',
				duration: 2000
			});
		}
	}
</script>

<style lang="scss" scoped>
	.my-main{
		.my-user-info-box{
			background: #ffffff;
			align-items: center;
			padding: 30rpx 60rpx;
			.user-info-head-img{
				width: 140rpx;
				height: 140rpx;
			}
			.user-info-head-name{
				padding-left: 20rpx;
				flex: 1;
				font-weight: bold;
				font-size: 34rpx;
				color: #333333;
			}
		}
		.my-use-box{
			padding: 24rpx;
			.my-box{
				background: #ffffff;
				padding: 24rpx;
				border-radius: 15rpx;
				margin-bottom: 24rpx;
			}
			.my-menus-box{
				background: #ffffff;
				padding:0 24rpx;
				.my-menus-list{
					padding:26rpx 0;
					align-items: center;
					border-bottom: 1rpx #C4C8D440 solid;
					.my-menus-icon{
						width: 40rpx;
						height: 40rpx;
					}
					.my-menus-name{
						flex: 1;
						margin-left: 20rpx;
					}
				}
				.my-menus-list:last-child{
					border-bottom: none;
				}
			}
		}
	}
	.enter-icon{
		width: 30rpx;
		height: 40rpx;
	}
</style>

<style>
	page{
		background: #EFEFF0;
	}
</style>